<template>
  <div class="AdverseReactions">
    <div class="title">
      <p></p>
      <p>未复查患者</p>
    </div>
    <div class="wrap" v-if="state.unreviewedReactionsObj && state.unreviewedReactionsObj.id">
      <div class="cardWrap cf">
        <div class="card">
          <p>任务提醒时间</p>
          <p>
            {{
              state.unreviewedReactionsObj.remindTime
                ? transformTime(state.unreviewedReactionsObj.remindTime, 1)
                : ''
            }}
          </p>
        </div>
        <div class="card">
          <p>计划复查时间</p>
          <p>
            {{
              state.unreviewedReactionsObj.planTime
                ? transformTime(state.unreviewedReactionsObj.planTime, 2)
                : ''
            }}
          </p>
        </div>
        <div class="card">
          <p>复查原因</p>
          <a-tooltip placement="topLeft">
            <template #title>
              <span>{{ state.unreviewedReactionsObj.reason }}</span>
            </template>
            <p class="reason">{{ state.unreviewedReactionsObj.reason }}</p>
          </a-tooltip>
        </div>
        <div class="card">
          <p>未复查原因</p>
          <p>{{ state.unreviewedReactionsObj.failReason }}</p>
        </div>
        <div class="card">
          <p>上次复查提醒时间</p>
          <p>
            {{
              state.unreviewedReactionsObj.lastRemindTime
                ? transformTime(state.unreviewedReactionsObj.lastRemindTime, 3)
                : ''
            }}
          </p>
        </div>
        <div class="card">
          <p>上次复查提醒类型</p>
          <p>{{ state.unreviewedReactionsObj.lastManageType == 1 ? '人工' : '自动' }}</p>
        </div>
        <div class="card">
          <p>累计提醒次数</p>
          <p>
            {{
              state.unreviewedReactionsObj.recheckCount
                ? state.unreviewedReactionsObj.recheckCount
                : '0'
            }}次
          </p>
        </div>
      </div>
      <!-- <div class="itemWrap">
        <p>复查提醒结果</p>
        <a-textarea
          class="textarea"
          v-model:value="state.textareaValue"
          placeholder="请输入提醒结果描述"
          showCount
          :maxlength="300"
        />
      </div> -->
      <div class="itemWrap">
        <div class="checkBoxResult">复查提醒结果</div>
        <div class="checkBox">
          <a-switch size="small" id="switch" v-model:checked="state.valueSwitch" />
          <label for="switch">提醒失败</label>
        </div>
        <ul class="ul cf" v-if="state.valueSwitch == true">
          <li v-for="(item, index) in state.switchList" @click="switchFun(item)" :key="index">
            {{ item.name }}
          </li>
        </ul>
        <a-textarea
          class="textarea"
          v-model:value="state.textareaValueTwo"
          placeholder="请输入提醒结果描述"
          showCount
          :maxlength="300"
          :disabled="
            state.unreviewedReactionsObj && state.unreviewedReactionsObj.status == 0 ? false : true
          "
        />
      </div>
      <div
        class="btn"
        v-if="state.unreviewedReactionsObj && state.unreviewedReactionsObj.status == 0"
      >
        <a-button type="primary" @click="completeFun">完成</a-button>
        <a-button @click="ignore">忽略</a-button>
      </div>
    </div>
    <a-empty v-else class="mt16">
      <template #description>
        <span> 暂无未复查患者 </span>
      </template>
    </a-empty>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, watch, createVNode } from 'vue'
import { transformTime } from '@/assets/hmmJs/index.js'
import { message, Modal } from 'ant-design-vue'
import { ExclamationCircleFilled } from '@ant-design/icons-vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const props = defineProps(['childProp'])
const state = reactive({
  textareaValue: '',
  textareaValueTwo: '',
  unreviewedReactionsObj: {},
  valueSwitch: false,
  switchList: [
    {
      name: '联系失败',
      id: '1'
    },
    {
      name: '患者无法沟通',
      id: '2'
    },
    {
      name: '患者拒绝采访',
      id: '3'
    }
  ]
})
watch(
  props,
  (newValue) => {
    state.unreviewedReactionsObj = newValue.childProp
    state.textareaValueTwo = state.unreviewedReactionsObj.remindResult
    state.valueSwitch = false
  },
  { immediate: true, deep: true }
)
const switchFun = (item) => {
  state.textareaValueTwo = item.name
}
let emit = defineEmits(['sendUnreviewedState', 'ignoreUnreviewedState'])
const completeFun = () => {
  if (state.textareaValueTwo.trim().length == 0) {
    message.error('发送提醒不能为空')
    return false
  }
  let param = {
    id: state.unreviewedReactionsObj.id,
    remindResult: state.textareaValueTwo,
    failReason: state.valueSwitch == true ? '2' : '1'
  }
  emit('sendUnreviewedState', param)
}
const ignore = () => {
  Modal.confirm({
    title: '忽略',
    icon: createVNode(ExclamationCircleFilled),
    content: '确认忽略?',
    okText: '确定',
    okButtonProps: {
      //   danger: true,
      type: 'primary'
    },
    cancelText: '取消',
    onOk() {
      let param = {
        id: state.unreviewedReactionsObj.id,
        remindResult: state.textareaValueTwo,
        failReason: state.valueSwitch == true ? '2' : '1'
      }
      emit('ignoreUnreviewedState', param)
    },
    onCancel() {
      console.log('Cancel')
    }
  })
}
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.mt16 {
  margin-top: 16px;
}
.AdverseReactions {
  .title {
    p {
      font-size: 18px;
      color: #1d2129;
      font-weight: 600;
      display: inline-block;
      vertical-align: middle;
      &:nth-child(1) {
        width: 3px;
        height: 16px;
        background: #165dff;
        margin-right: 10px;
      }
    }
  }
  .cardWrap {
    margin-top: 4px;
    .card {
      margin-top: 12px;
      font-size: 14px;
      width: 25%;
      float: left;
      min-height: 34px;
      p {
        color: #86909c;
        font-weight: 700;
        &:nth-child(2) {
          color: #1d2129;
          margin-top: 12px;
          height: 66px;
          &.reason {
            max-height: 66px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      .textarea {
        outline: none; /*边线不显示*/
        resize: none; /*禁止拉伸*/
        background: none; /*带点绿*/
        appearance: none;
        padding: 10px 0px;
        width: calc(100% - 150px);
        font-size: 14px;
        color: #1d2129;
        display: inline-block;
        vertical-align: top;
        height: 80px;
      }
    }
  }
  .itemWrap {
    margin-top: 12px;
    font-size: 14px;
    color: #86909c;
    font-weight: 700;
    .checkBoxResult {
      margin-bottom: 5px;
    }
    .checkBox {
      .ant-switch {
        display: inline-block;
        vertical-align: middle;
      }
      label {
        display: inline-block;
        vertical-align: middle;
        margin-left: 8px;
        font-size: 14px;
        color: #1d2129;
        &:hover {
          cursor: pointer;
        }
      }
    }
    .textarea {
      display: block;
      margin-top: 12px;
      height: 80px;
      width: 700px;
    }
    :deep(.ant-radio-group) {
      span {
        &.ant-radio {
          .ant-radio-inner {
            background-color: #165dff;
            border-color: #165dff;
          }
        }
        &:nth-child(2) {
          font-size: 14px;
          color: #1d2129;
        }
      }
    }
    .ul {
      li {
        margin-top: 12px;
        float: left;
        display: block;
        padding: 2px 8px;
        border-radius: 2px;
        background: #ffece8;
        color: #f53f3f;
        margin-right: 8px;
        font-weight: 600;
        &:hover {
          cursor: pointer;
          opacity: 0.8;
        }
      }
    }
  }
  .btn {
    margin-top: 16px;
    :deep(.ant-btn) {
      padding: 0 16px;
      &:nth-child(1) {
        margin-right: 10px;
        background: #165dff;
      }
    }
  }
}
</style>
